<template>
  <div class="mod-config">
    <el-form
      :inline="true"
      :model="dataForm"
      @keyup.enter.native="getDataList()"
      class="formSearch"
    >
      <el-form-item>
        <el-date-picker
          v-model="dataForm.date"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          type="date"
          size="mini"
          placeholder="选择日期"
        />
      </el-form-item>
      <el-form-item>
        <el-time-select
          v-model="dataForm.time"
          size="mini"
          :picker-options="{
            start: '00:00',
            step: '01:00',
            end: '23:00'
          }"
          placeholder="选择时间"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          @click="getDataList()"
          size="mini"
          v-if="isAuth('cms:tbFlowMeter:resultList')"
          >查询</el-button
        >
      </el-form-item>
    </el-form>
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      style="width: 100%;"
      height="80vh"
    >
      <el-table-column
        width="100"
        prop="flowMeterName"
        header-align="center"
        align="center"
        label="地点"
      />
      <el-table-column
        prop="updateTime"
        header-align="center"
        align="center"
        label="更新时间"
      />
      <el-table-column
        prop="flowSum"
        header-align="center"
        align="center"
        label="今日供水量"
      />
      <!--      <el-table-column-->
      <!--        prop="sellWaterSum"-->
      <!--        header-align="center"-->
      <!--        align="center"-->
      <!--        label="今日售水量/kg"-->
      <!--      />-->
      <el-table-column
        prop="nightFlow"
        header-align="center"
        align="center"
        label="夜间时段售水量"
      />
      <el-table-column
        prop="flowMax"
        header-align="center"
        align="center"
        label="最大瞬时流量"
      />
      <el-table-column
        prop="flowMin"
        header-align="center"
        align="center"
        label="最小瞬时流量"
      />
      <el-table-column
        prop="flowAvg"
        header-align="center"
        align="center"
        label="平均售水量"
      />
      <el-table-column
        prop="pressMax"
        header-align="center"
        align="center"
        label="最大压力"
      />
      <el-table-column
        prop="pressMin"
        header-align="center"
        align="center"
        label="最小压力"
      />
      <el-table-column
        prop="pressAvg"
        header-align="center"
        align="center"
        label="平均压力"
      />
      <el-table-column
        header-align="center"
        align="center"
        width="80"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            v-if="isAuth('cms:tbFlowMeter:trend')"
            @click="addOrUpdateHandle(dataForm.date, scope.row.id)"
            >趋势图
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update
      v-if="addOrUpdateVisible"
      ref="addOrUpdate"
      @refreshDataList="getDataList"
    />
  </div>
</template>

<script>
import AddOrUpdate from "./result-add-or-update";
import moment from "moment";
import { isAuth } from "../../../utils";

export default {
  data() {
    return {
      dataForm: {
        date: "",
        time: ""
      },
      timer: null,
      dataList: [],
      tableShow: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false
    };
  },
  components: {
    AddOrUpdate
  },
  mounted() {
    if (this.timer) {
      clearInterval(this.timer);
    } else {
      this.timer = setInterval(() => {
        // 调用相应的接口，渲染数据
        this.getDataList(1);
      }, 10 * 60 * 1000);
      this.$once("hook:beforeDestroy", () => {
        window.clearInterval(this.timer);
      });
    }
  },
  destroyed() {
    clearInterval(this.timer);
  },
  activated() {
    this.getDataList();
  },
  methods: {
    // 获取数据列表
    getDataList(type) {
      this.dataListLoading = true;
      // 判断是否有权限查看
      if (isAuth("cms:tbFlowMeter:resultList")) {
        if (type === 1) {
          this.dataForm.date = moment(new Date()).format("YYYY-MM-DD");
          let MinutesShow;
          if (
            moment(new Date()).format("mm") > 0 &&
            moment(new Date()).format("mm") < 10
          ) {
            MinutesShow = ":00";
          } else if (
            moment(new Date()).format("mm") >= 10 &&
            moment(new Date()).format("mm") < 20
          ) {
            MinutesShow = ":10";
          } else if (
            moment(new Date()).format("mm") >= 20 &&
            moment(new Date()).format("mm") < 30
          ) {
            MinutesShow = ":20";
          } else if (
            moment(new Date()).format("mm") >= 30 &&
            moment(new Date()).format("mm") < 40
          ) {
            MinutesShow = ":30";
          } else if (
            moment(new Date()).format("mm") >= 40 &&
            moment(new Date()).format("mm") < 50
          ) {
            MinutesShow = ":40";
          } else if (
            moment(new Date()).format("mm") >= 50 &&
            moment(new Date()).format("mm") <= 59
          ) {
            MinutesShow = ":50";
          }
          this.dataForm.time = moment(new Date()).format("HH") + MinutesShow;
        }
        // 判断日期不能为空，否则获取当天日期
        if (this.dataForm.date === null || this.dataForm.date === "") {
          this.dataForm.date = moment(new Date()).format("YYYY-MM-DD");
        }
        // 时间选择，没有时间，默认选择到时分，有时间数据就获取时间数据，秒的数据需要在再放合并时间时候补全
        if (this.dataForm.time === null || this.dataForm.time === "") {
          this.dataForm.time = moment(new Date()).format("HH") + ":00";
        } else {
          this.dataForm.time = this.dataForm.time;
        }
        let postDateTime =
          this.dataForm.date + " " + this.dataForm.time + ":00";
        // 请求
        this.$http({
          url: this.$http.adornUrl("/cms/tbFlowMeter/resultList"),
          method: "get",
          params: this.$http.adornParams({
            dateTime: postDateTime
          })
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.dataList = data.vo;
          } else {
            this.dataList = [];
          }
          this.dataListLoading = false;
        });
      } else {
        this.$message.error("该用户没有权限浏览，请联系管理员添加权限");
        this.dataListLoading = false;
      }
    },
    // 趋势图信息
    addOrUpdateHandle(date, id) {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(date, id);
      });
    }
  }
};
</script>
